<template>
  <div class="box">
    <div class="box-main">
      <div class="title">资金信息查看</div>
      <el-table :data="tableData">
        <el-table-column prop="power" label="功率" />
        <el-table-column prop="max_power_short" label="最大短期功率" />
        <el-table-column prop="net_cash_power" label="净现金功率" />
        <el-table-column prop="total_assets" label="总资产" />
        <el-table-column prop="securities_assets" label="证券资产" />
        <el-table-column prop="fund_assets" label="基金资产" />
        <el-table-column prop="bond_assets" label="债券资产" />
        <el-table-column prop="cash" label="现金" />
        <el-table-column prop="market_val" label="市场价值" />
        <el-table-column prop="long_mv" label="多头市场价值" />
        <el-table-column prop="short_mv" label="空头市场价值" />
        <el-table-column prop="pending_asset" label="待处理资产" />
        <el-table-column prop="frozen_cash" label="冻结现金" />
        <el-table-column prop="avl_withdrawal_cash" label="可用提取现金" />
        <el-table-column prop="unrealized_pl" label="未实现损益" />
        <el-table-column prop="realized_pl" label="已实现损益" />
        <el-table-column prop="currency" label="货币" />
        <el-table-column prop="hk_cash" label="港元现金">
          <template #default="{ row }">
            <span v-for="item in row.hk_cash.split(',')" :key="item">{{ item }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="hk_avl_withdrawal_cash" label="港元可用提取现金">
          <template #default="{ row }">
            <span v-for="item in row.hk_avl_withdrawal_cash.split(',')" :key="item">{{ item }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="us_cash" label="美元现金">
          <template #default="{ row }">
            <span v-for="item in row.us_cash.split(',')" :key="item">{{ item }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="us_avl_withdrawal_cash" label="美元可用提取现金">
          <template #default="{ row }">
            <span v-for="item in row.us_avl_withdrawal_cash.split(',')" :key="item">{{ item }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="cn_cash" label="人民币现金" />
        <el-table-column prop="cn_avl_withdrawal_cash" label="人民币可用提取现金" />
      </el-table>
    </div>

    <div class="box-main">
      <div class="title">持仓信息查看</div>
      <el-table :data="tableDataHolding">
        <el-table-column prop="position_side" label="持仓方向" />
        <el-table-column prop="code" label="股票代码" />
        <el-table-column prop="stock_name" label="股票名称" />
        <el-table-column prop="qty" label="持有数量" />
        <el-table-column prop="can_sell_qty" label="可用数量" />
        <el-table-column prop="currency" label="交易货币" />
        <el-table-column prop="nominal_price" label="市价" />
        <el-table-column prop="cost_price" label="摊薄成本价" />
        <el-table-column prop="cost_price_valid" label="成本价是否有效">
          <template #default="{row}">
            <div v-if="row.cost_price_valid">
              是
            </div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column prop="market_val" label="市值" />
        <el-table-column prop="pl_ratio" label="盈亏比例" />
        <el-table-column prop="pl_ratio_valid" label="盈亏比例是否有效">
          <template #default="{row}">
            <div v-if="row.pl_ratio_valid">
              是
            </div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column prop="pl_val" label="盈亏金额" />
        <el-table-column prop="pl_val_valid" label="盈亏金额是否有效">
          <template #default="{row}">
            <div v-if="row.pl_val_valid">
              是
            </div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column prop="today_pl_val" label="今日盈亏金额" />
        <el-table-column prop="today_trd_val" label="今日交易金额" />
        <el-table-column prop="today_buy_qty" label="今日买入总量" />
        <el-table-column prop="today_buy_val" label="今日买入总额" />
        <el-table-column prop="today_sell_qty" label="今日卖出总量" />
        <el-table-column prop="today_sell_val" label="今日卖出总额" />
        <el-table-column prop="unrealized_pl" label="未实现盈亏" />
        <el-table-column prop="realized_pl" label="已实现盈亏" />
      </el-table>
    </div>

    <div class="box-main">
      <div class="title">查询最大可买可卖</div>
      <el-card style="width: 90%">
        <el-form ref="form" :model="maxBuySellParam">
          <el-form-item label="代码(必填)" prop="code">
            <el-input v-model="maxBuySellParam.code" />
          </el-form-item>
          <el-form-item label="订单 ID(选填)" prop="orderId">
            <el-input v-model="maxBuySellParam.orderId" />
          </el-form-item>
          <el-form-item label="订单类型(选填)" prop="orderType">
            <el-input v-model="maxBuySellParam.orderType" />
          </el-form-item>
          <el-form-item label="价格(必填)" prop="price">
            <el-input v-model="maxBuySellParam.price" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getFutuMaxBuySell">查询！</el-button>
          </el-form-item>
        </el-form>
        <div>
          <p>最大现金买入: {{ tableDataMaxSB.max_cash_buy }}</p>
          <p>最大现金和保证金买入: {{ tableDataMaxSB.max_cash_and_margin_buy }}</p>
          <p>最大头寸卖出: {{ tableDataMaxSB.max_position_sell }}</p>
          <p>最大卖空: {{ tableDataMaxSB.max_sell_short }}</p>
          <p>最大回购: {{ tableDataMaxSB.max_buy_back }}</p>
          <p>多头所需初始保证金: {{ tableDataMaxSB.long_required_im }}</p>
          <p>空头所需初始保证金: {{ tableDataMaxSB.short_required_im }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import Empty from '@/components/Empty/index.vue'
import { getFutuAccountList, getFutuFundInfo, getFutuHolding, getFutuMaxBuySell } from './api'

@Component({
  name: 'FutuFundManage',
  components: {
    HeadLable,
    InputAutoComplete,
    Empty
  }
})
export default class FutuFundManage extends Vue {
  private tableData = []
  private tableDataHolding = []
  private holdingBody = {
    code: '',
    plRatioMax: '',
    plRatioMin: ''
  }
  private maxBuySellParam = {
    code: '',
    orderId: '',
    orderType: '',
    price: ''
  }
  private tableDataMaxSB = {
    max_cash_buy: '0.0',
    max_cash_and_margin_buy: '0.0',
    max_position_sell: '0.0',
    max_sell_short: 'N/A',
    max_buy_back: 'N/A',
    long_required_im: 'N/A',
    short_required_im: 'N/A'
  }

  created() {
    this.init()
  }

  private async init() {
    await this.getFutuFundInfo()
    await this.getFutuHolding()
  }

  private async getFutuFundInfo() {
    await getFutuFundInfo()
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableData = res.data && res.data.data
        }
      })
  }

  private async getFutuHolding() {
    await getFutuHolding(this.holdingBody)
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableDataHolding = res.data && res.data.data
        }
      })
  }

  private async getFutuMaxBuySell() {
    await getFutuMaxBuySell(this.maxBuySellParam)
      .then(res => {
        console.log(res)
        if (String(res.data.code) === '0') {
          this.tableDataMaxSB = res.data && res.data.data[0]
        }
      })
  }
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-bottom: 50px;

  .box-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;


    .title {
      font-size: 30px;
      font-weight: 600;
      padding: 10px;
    }
  }

}
</style>
